// shopcar.js
Vue.createApp({
    data() {
        return {
            shopList: [
                {
                    shop: 'MEIZU耳机',
                    selected: false,
                    list: [
                        {
                            id: 1,
                            title: 'MEIZU UR 高端定制耳机',
                            img: 'img/p1.png',
                            price: 5800,
                            num: 1,
                            selected: false
                        },
                        {
                            id: 2,
                            title: '魅族 POP2 高端定制耳机',
                            img: 'img/p6.png',
                            price: 4800,
                            num: 1,
                            selected: false
                        }
                    ]
                },
                {
                    shop: 'MEIZU手机',
                    selected: false,
                    list: [
                        {
                            id: 3,
                            title: '魅族 16XS',
                            img: 'img/p2.png',
                            price: 5800,
                            num: 1,
                            selected: false
                        },
                        {
                            id: 4,
                            title: '魅族 16s pro',
                            img: 'img/p3.png',
                            price: 4800,
                            num: 1,
                            selected: false
                        }
                    ]
                }
            ],
            allSelected: false
        };
    },
    computed: {
        selectedItemsCount() {
            return this.shopList.reduce((count, shop) => {
                return count + shop.list.reduce((sum, goods) => {
                    return sum + goods.num;
                }, 0);
            }, 0);
        },
        totalItems() {
            return this.shopList.reduce((total, shop) => {
                return total + shop.list.length;
            }, 0);
        },
        totalPrice() {
            return this.shopList.reduce((total, shop) => {
                return total + shop.list.reduce((sum, goods) => {
                    return sum + (goods.price * goods.num);
                }, 0);
            }, 0);
        }
    },
    methods: {
        selectAll() {
            this.allSelected = !this.allSelected;
            this.shopList.forEach(shop => {
                shop.selected = this.allSelected;
                shop.list.forEach(goods => {
                    goods.selected = this.allSelected;
                });
            });
        },
        deleteSelected(goods) {
            this.shopList.forEach(shop => {
                shop.list = shop.list.filter(item => item !== goods);
            });
        },
        deleteAllSelected() {
            this.shopList.forEach(shop => {
                shop.list = shop.list.filter(goods => !goods.selected);
            });
        },
        decreaseQuantity(goods) {
            if (goods.num > 0) {
                goods.num--;
            }
        },
        increaseQuantity(goods) {
            goods.num++;
        },
        selectShop(shop) {
            const allSelected = shop.list.every(goods => goods.selected);
            shop.list.forEach(goods => {
                goods.selected = !allSelected;
            });
            shop.selected = !allSelected;
            this.updateAllSelectedState();
        },
        updateAllSelectedState() {
            this.allSelected = this.shopList.every(shop =>
                shop.selected && shop.list.every(goods => goods.selected)
            );
        },
        checkout() {
            const hasSelectedItems = this.shopList.some(shop =>
                shop.list.some(goods => goods.selected)
            );

            if (!hasSelectedItems) {
                alert('请先选择商品！');
                return;
            }

            if (confirm(`确认结账，总金额为 ￥${this.totalPrice.toFixed(2)} 吗？`)) {
                alert('结账成功！感谢您的购买！');
                this.deleteAllSelected();
            }
        }
    },
    watch: {
        shopList: {
            deep: true,
            handler() {
                this.updateAllSelectedState();
            }
        }
    }
}).mount('#app');